﻿@model BeanOverflow.Models.QuestionAndResponsesModel
@{
    ViewBag.Title = "ViewAndAnswer";
}
<div class="qar-title-label">
    Title</div>
<div class="qar-title-field">
    @Html.DisplayFor(model => model.Question.Title)
</div>
 <fieldset>
 <script type="text/javascript">
     function vote(id,isQuestion,voteUp) {
         var xmlhttp;
         if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
             xmlhttp = new XMLHttpRequest();
         }
         else {// code for IE6, IE5
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         if (isQuestion == 1) {
             xmlhttp.onreadystatechange = function () {
                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                     document.getElementById("question-votes").innerHTML = xmlhttp.responseText;
                 }
             }
             if (voteUp == 1) {
                 xmlhttp.open("POST", "/Question/VoteUp/" + id, true);
             } else {
                 xmlhttp.open("POST", "/Question/VoteDown/" + id, true);
             }
         } else {
             xmlhttp.onreadystatechange = function () {
                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                     document.getElementById("res-votes-"+id).innerHTML = xmlhttp.responseText;
                 }
             }
             if (voteUp == 1) {
                 xmlhttp.open("POST", "/Response/VoteUp/" + id, true);
             } else {
                 xmlhttp.open("POST", "/Response/VoteDown/" + id, true);
             }
         }
         xmlhttp.send();
     }
    
</script>
<div id="qar-question">
    <div class="qar-votes">
        <div class="qar-vote-label">
            Votes</div>
            <button type="button" class="button-vote-up" onclick="vote(@Html.DisplayFor(model => model.Question.ID),1,1)"></button>
        <div class="qar-vote-field" id="question-votes">
            @Html.DisplayFor(model => model.Question.Votes)
        </div>
         <button type="button" class="button-vote-down"onclick="vote(@Html.DisplayFor(model => model.Question.ID),1,0)"></button>
    </div>
    <div id="qar-question-info">
        <div class="qar-qb-field">
            @Html.DisplayFor(model => model.Question.Body)
        </div>  
         <div class="qar-metadata">
       
            <div class="qar-uid-field"> 
                 @Html.ActionLink(Model.Question.UserName, "Details/" + Model.Question.UserName, "MemberProfile")
            </div>
          
            <div class="qar-cd-field">
                Asked: @Html.DisplayFor(model => model.Question.CreatedDate)
            </div>
            @if (Model.Question.CreatedDate != Model.Question.LastModifiedDate)
            {
               
                <div class="qar-lmd-field">
                    Edited: @Html.DisplayFor(model => model.Question.LastModifiedDate)
                </div>
            }
        </div>
    </div>
    
</div>
</fieldset>
<div id="qar-answer">
    <div class="qar-answers-label">
        @Html.DisplayFor(modelItem => Model.Responses.ToList().Count) Answers</div>
    @foreach (var item in Model.Responses)
    {
        <fieldset>
            <div class="qar-response">
                <div class="qar-votes">
                    <div class="qar-vote-label">
                        Votes</div>
                         <button type="button" class="button-vote-up" onclick="vote(@Html.DisplayFor(modelItem => item.ID),0,1)"></button>
                    <div class="qar-vote-field" id="res-votes-@Html.DisplayFor(modelItem => item.ID)">
                        @Html.DisplayFor(modelItem => item.Votes)
                    </div>
                    <button type="button"  class="button-vote-down" onclick="vote(@Html.DisplayFor(modelItem => item.ID),0,0)"></button>
                </div>
                <div id="qar-res-info">
                    
                    <div class="qar-res-bd-field">
                        @Html.DisplayFor(modelItem => item.Body)
                    </div>
                    <div class="qar-metadata">
                       
                        <div class="qar-uid-field">
                            @Html.ActionLink(item.UserName, "Details/" + item.UserName, "MemberProfile")
                        </div>
                      
                        <div class="qar-res-cd-field">
                          Answered: @Html.DisplayFor(modelItem => item.CreatedDate)
                        </div>
                        @if (item.CreatedDate != item.LastModifiedDate)
                        {
                           
                            <div class="qar-res-lmd-field">
                               Edited: @Html.DisplayFor(modelItem => item.LastModifiedDate)
                            </div>
                        }
                    </div>
                </div>
            </div>
        </fieldset>

    }
</div>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <div class="qar-your-answer-label">
        Your Answer</div>
    <fieldset>
        @Html.HiddenFor(model => model.NewResponse.QuestionID)
        @Html.HiddenFor(model => model.NewResponse.ParentID)
        <div class="qar-editor-label">
            @Html.LabelFor(model => model.NewResponse.Body)
        </div>
        <div class="qar-editor-field">
            @Html.EditorFor(model => model.NewResponse.Body)
            @Html.ValidationMessageFor(model => model.NewResponse.Body)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

